<template>
    <ul><li v-for="(item,index) in arr">{{ item }} <button @click="deleteArr(index)">删除</button></li> </ul>
    <input type="button" value="生成" @click="generate">
</template>
<script>
import { ref, reactive } from "vue"
export default {
    name: 'App',
    setup() {
        const arr = reactive([])
        const generate =()=>{  
            const random = ref(Math.floor((Math.random() * 5) + 1))
            arr.push(random)
        }
        const deleteArr = (index)=>{
            arr.splice(index,1)
        }
        return {generate,arr,deleteArr}
    }
}
</script>

<style>
ul {
    list-style-type: none;
    border: 1px solid lightblue;
}

input {
    margin-left: 20px;
}
</style>